<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>项目管理系统</title>
    <link href="css/layui.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body style = "width: 100%;margin: 0 auto;background-image: url(images/bodyBG1.png)">
    <div class="layui-fluid" style = "height: 100%">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <p class="title-row">项目管理系统</p>
                    </div>
                </div>

                <div class="layui-tab" style = "height: 90%">
                    <ul class="layui-tab-title">
                        <li class="layui-this">项目规划和申报</li>
                        <li>项目前期</li>
                        <li>项目实施准备</li>
                        <li>项目实施</li>
                        <li>验收交付</li>
                        <li>竣工及销项</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <!--内容1-->
                            <form class="layui-form" action="">
                                <div class="layui-form-item">
                                    <div class="layui-inline" style="margin-bottom:-4px">
                                        <!-- 专业-->
                                        <label class="layui-form-label">专业：</label>
                                        <div class="layui-input-inline">
                                            <select  name="modules" lay-verify="required" lay-search="">
                                                <option value="">请选择：</option>
                                                <option value="1">通号</option>
                                                <option value="2">供电</option>
                                                <option value="3">运营</option>
                                            </select>
                                        </div>

                                        <!-- 类型-->
                                        <label class="layui-form-label">类型：</label>
                                        <div class="layui-input-inline">
                                            <select name="modules" lay-verify="required" lay-search="">
                                                <option value="">请选择：</option>
                                                <option value="1">通号</option>
                                                <option value="2">供电</option>
                                                <option value="3">运营</option>
                                            </select>
                                        </div>

                                        <label class="layui-form-label">验证日期</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="date" id="NYR" lay-verify="date" placeholder="yyyy-MM" class="layui-input">
                                        </div>

                                        <!-- 项目-->
                                        <label class="layui-form-label">项目：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="title" required lay-verify="required" placeholder="请输入项目" class="layui-input">
                                        </div>
                                        <!-- 月份-->
<!--                                        <label class="layui-form-label">月份：</label>-->
<!--                                        <div class="layui-input-inline">-->
<!--                                            <select name="modules" lay-verify="required" lay-search="">-->
<!--                                                <option value="">请选择：</option>-->
<!--                                                <option value="1">2020-08</option>-->
<!--                                                <option value="2">2020-09</option>-->
<!--                                                <option value="3">2020-10</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
                                    </div>
                                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 8px;margin-bottom: 8px;">
                                        <legend align="center" id = "relTitleText">进度</legend>
                                    </fieldset>
                                    <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;margin-top: -7px">
                                        <li class="layui-nav-item layui-nav-itemed">
                                            <dl class="layui-nav-child" style="background-color: #eeeeee !important; color: #0C0C0C !important;">
                                                <dd class = "layui-this"><a href="javascript:;" style="color: #0C0C0C !important;" rel-src = "overview.html">总览</a></dd>
                                                <dd><a href="javascript:;" style="color: #0C0C0C !important;" rel-src = "progress.html">进度</a></dd>
                                                <dd><a href="javascript:;" style="color: #0C0C0C !important;" rel-src = "investment.html">投资数</a></dd>
                                                <dd><a href="javascript:;" style="color: #0C0C0C !important;" rel-src = "fundsAmount.html">资金数</a></dd>
                                                <dd><a href="javascript:;" style="color: #0C0C0C !important;" rel-src = "imgProgress_test.html">形象进度</a></dd>
                                            </dl>
                                        </li>
                                    </ul>
                                    <div class="layui-body" id="LAY_app_body" style = "left: 11.5%;top: 17.5%; height: 100%" >
                                        <div class="layadmin-tabsbody-item layui-show" style="height: 100%">
                                            <iframe style = "width: 100%;height: 100%" src="overview.html" frameborder="0" class="layadmin-iframe" name="tree" id="iframe_content" ></iframe>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="layui-tab-item"><!--内容2-->项目前期</div>
                        <div class="layui-tab-item"><!--内容3-->项目实施准备</div>
                        <div class="layui-tab-item"><!--内容4-->项目实施</div>
                        <div class="layui-tab-item"><!--内容5-->验收交付</div>
                        <div class="layui-tab-item"><!--内容6-->竣工及销项</div>
                    </div>
                </div>
    </div>

    <script src="layui.js"></script>
    <script src="index.js"></script>
    <script>
        layui.config({
            base: ''
        });
        layui.use(['layer','form','element','laydate'], function () {//,'element'
            var layer = layui.layer
                , element = layui.element
                ,form = layui.form
                , $ = layui.$
                ,laydate = layui.laydate;

            //年月选择器
            laydate.render({
                elem: '#NYR'
                ,type: 'month'
                ,change: function(value, date){
                    layer.msg(value); //得到日期生成的值，如：2017-08-18
                    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                }
            });
            //监听导航点击
            element.on('nav(demo)', function(elem){
                //console.log(elem)
                document.cookie = elem.attr("rel-src");
                $("#iframe_content").attr("src",elem.attr("rel-src"));
                $("#relTitleText").text(elem.text());
            });
        });
    </script>
</body>
<style>
.layui-input-inline{
    width: 155px !important;
}
.layui-tab-title>li{
	cursor:pointer;
}
</style>
</html>